const canvas = document.getElementById("waveformCanvas");
const ctx = canvas.getContext("2d");
const width = canvas.width;
const height = canvas.height;

let time = 0; // 时间变量

// 绘制函数
function drawWaveform() {
    ctx.clearRect(0, 0, width, height); // 清空画布

    // 1. 绘制轴线
    ctx.beginPath();
    ctx.moveTo(0, height / 2);
    ctx.lineTo(width, height / 2);
    ctx.strokeStyle = "#888";
    ctx.stroke(); // 渲染并清空当前路径

    // 2. 绘制文字（注意文字不需要 beginPath 和 stroke，因为它是 fillText）
    ctx.font = '30px Arial';
    ctx.fillStyle = 'red';
    ctx.fillText('Hello, Canvas!', 50, 100);

    // 3. 绘制正弦波
    ctx.beginPath();
    for (let x = 0; x < width; x++) {
        const y = Math.sin((x + time) * 0.05) * 50 + height / 2;
        ctx.lineTo(x, y);
    }
    ctx.strokeStyle = "blue";
    ctx.stroke(); // 渲染正弦波


    // time += 2; // 时间步进
    // requestAnimationFrame(drawWaveform); // 动画循环
}

drawWaveform();